import { View, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import PageContainer from "@shared/components/PageContainer";
import observer, { GlobalStore } from "@shared/store";
import "./index.scss";
import { MenuTypeSelector } from "./MenuTypeSelector";

export const OrderTypes = {
  PICK_UP: 4, // 自提
  EAT_IN: 2, // 堂食小吃
  SCAN_TABLE: 2, // 堂食正餐
  TAKE_OUT: 3, //外卖
} as const;
export type MenuType = keyof typeof OrderTypes;

const Index = () => {
  const [menuType, setMenuType] = useState<MenuType>("EAT_IN");
  console.log("menuType :>> ", menuType);
  return (
    <PageContainer className="index">
      <Text className="text-[red] text-[32px] flex-wrap">Hello world!</Text>
      <View style={{ padding: "18px 16px 16px 16px" }}>
        <MenuTypeSelector
          type={menuType}
          onChange={() => {
            if (menuType === "PICK_UP") setMenuType("EAT_IN");
            else {
              setMenuType("PICK_UP");
            }
          }}
        ></MenuTypeSelector>
      </View>

      <View style="margin-top: 20rpx;">
        <View className="recycle_device_image">
          <View className="circle"></View>
          <View className="circle"></View>
        </View>

        <View className="recycle_device_title">
          <Text>连接设备</Text>
        </View>
      </View>
    </PageContainer>
  );
};

export default observer(Index);
